<template>
  <div>
  <el-dialog title="${entityDesc!""}"
             :visible.sync="selectDialogVisible"
             width="80%" @close="closeDialog">
    <div style="padding-bottom: 50px;">
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button
                style="float:right"
                type="primary"
                @click="handleSearchList()"
                size="small">
          查询搜索
        </el-button>
        <el-button
                style="float:right;margin-right: 15px"
                @click="handleResetSearch()"
                size="small">
          重置
        </el-button>
      </div>
      <div style="margin-top: 15px">
        <el-form :inline="true" :model="listQuery" size="small" label-width="140px"  label-suffix="：">
            ${searchConditionInput!""}
        </el-form>
      </div>
    </el-card>

    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>
        <#if showAddBtn>
            <el-button v-if="canAdd" type="warning" size="mini" class="btn-add" @click="handleAdd()" style="margin-left: 20px">添加</el-button>
        </#if>
    </el-card>

    <div class="table-container">
      <el-table :data="list"
                style="width: 100%;"
                v-loading="listLoading" border>
          <#if elTableColumnExpandStr?length gt 0>
              <el-table-column type="expand">
                  <template slot-scope="scope">
                      <el-form label-position="left" inline class="demo-table-expand" style="background-color: #eeeeee4f">
                          ${elTableColumnExpandStr!""}
                      </el-form>
                  </template>
              </el-table-column>
          </#if>
          ${elTableColumn!""}
          <#if showUpdateBtn || showDeleteBtn>
              <el-table-column label="操作" align="center" width="150" v-if="canDelete || canUpdate" >
                  <template slot-scope="scope">
                      <#if showUpdateBtn>
                          <el-button v-if="canUpdate" size="mini" type="primary" @click="handleUpdate(scope.row)">编辑</el-button>
                      </#if>
                      <#if showDeleteBtn>
                          <el-button  v-if="canDelete" size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                      </#if>
                  </template>
              </el-table-column>
          </#if>
      </el-table>
    </div>
    <div class="pagination-container">
      <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              layout="total, sizes,prev, pager, next,jumper"
              :current-page.sync="listQuery.current"
              :page-size="listQuery.pageSize"
              :page-sizes="[5,10,15]"
              :total="total">
      </el-pagination>
    </div>
    </div>
  </el-dialog>

      <#if editFormInput?length gt 0>
          <el-dialog title="编辑${entityDesc!""}"
                     :visible.sync="editDialogVisible" @close="handleDialogClose('editDialogRef')"
                     width="60%">
              <el-form :model="${entityName!""}"  label-suffix="："
                       :rules="formRule" ref="editDialogRef"
                       label-width="150px" size="small">
                  ${editFormInput!""}
              </el-form>
              <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="handleEditDialogConfirm()" size="small">确 定</el-button>
      </span>
          </el-dialog>
      </#if>

      <#if addFormInput?length gt 0>
          <el-dialog title="新增${entityDesc!""}"
                     :visible.sync="addDialogVisible" @close="handleDialogClose('addDialogRef')"
                     width="60%">
              <el-form :model="${entityName!""}" label-suffix="："
                       :rules="formRule" ref="addDialogRef"
                       label-width="150px" size="small">
                  ${addFormInput!""}
              </el-form>
              <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="handleAddDialogConfirm()" size="small">确 定</el-button>
      </span>
          </el-dialog>
      </#if>

      <#if hasFileManager>
          <file-manager :updateObject="updateObject" :fileKeys="fileKeys" :visible="fileDialogVisible"
                        @updateFile="updateFile"
                        @close="fileDialogVisible=false"></file-manager>
      </#if>
      ${associationDialog!""}
  </div>
</template>
<script>
   <#list importSet as data>
   ${data}
   </#list>

  const defaultListQuery = {
    current: 1,
    pageSize: 10,
    ${queryKeysNull!""}
    <#if queryKeysMap?exists>
    <#list queryKeysMap?keys as key>
    ${key}:${queryKeysMap[key]},
    </#list>
    </#if>
  }
  const default${className!""} = {
    <#if defaultEntityMap?exists>
    <#list defaultEntityMap?keys as key>
    ${key}:${defaultEntityMap[key]},
    </#list>
    </#if>
  }
  export default {
    components: {<#list importComponents as data>${data},</#list>},
    name: 'collectionComponent',
    props: {
      visible: {
        default: false
      },
      params:{
        default: {}
      }
    },
    data () {
      return {
        selectDialogVisible: false,
        canUpdate:false,
        canAdd:false,
        canDelete:false,
        <#if otherReturnDataMap?exists>
        <#list otherReturnDataMap?keys as key>
        ${key}:${otherReturnDataMap[key]},
        </#list>
        </#if>
        formRule: {${formRule!""}
        },
        listQuery: this.$deepClone( defaultListQuery),
        list: null,
        total: null,
        listLoading: false,
        addDialogVisible: false,
        editDialogVisible: false,
        <#if hasImageUpload>
        baseUri: getBaseUri(),
        downloadPersonalFileUrl: "api/sysFile/downloadPersonalFile?fileId=",
        </#if>
        <#if hasFileManager>
        fileDialogVisible: false,
        fileKeys: '',
        updateObject: {},
        </#if>
        <#if hasAssociation>
        componentSelectFromSearch:false,
        componentSelectField:'',
        componentAssociationField:'',
        componentAssociationTable:'',
        componentAssociationShowName:'',
        </#if>
        ${entityName!""}: this.$deepClone(default${className!""}),
      }
    },
    mounted() {
      let allResource = store.getters.allResource || []
      allResource.forEach(ar=>{
        if (ar.indexOf('${canUpdateResources!""}') !== -1){
          this.canUpdate = true
        }
        if (ar.indexOf('${canAddResources!""}') !== -1){
          this.canAdd = true
        }
        if (ar.indexOf('${canDeleteResources!""}') !== -1){
          this.canDelete = true
        }
      })
    },
    watch:{
      visible(val){
        this.selectDialogVisible = val
        if(val){
          this.getList()
        }
      }
    },
    methods: {
        ${additionMethod!""}
        <#if hasFileManager>
        updateFile(server, updateObject, callback) {
            ${entityName!""}PostRequire(server, updateObject).then((response) => {
                if (response.status) {
                    this.getList()
                    this.updateObject = updateObject
                    callback(response)
                }
            })
        },
        handleManagerFile(row, key) {
            this.updateObject = this.$deepClone(row);
            this.fileKeys = key
            this.fileDialogVisible = true
        },
        </#if>
        <#if showAddBtn>
        handleAdd () {
            this.addDialogVisible = true
            this.${entityName!""} = this.$deepClone(default${className!""})
        },
        handleAddDialogConfirm () {
            this.$refs.addDialogRef.validate((valid) => {
                if (valid) {
                    ${entityName!""}PostRequire('add',this.fixParams(this.${entityName!""})).then(response => {
                        if(response) {
                            this.$message({
                                message: response.message,
                                type: response.status?'success':'error'
                            })
                        }
                        this.addDialogVisible = false
                    }).finally(() => {
                        this.getList()
                    })
                }
            });
        },
        </#if>
        <#if showDeleteBtn>
        handleDelete (row) {
            this.$confirm('是否要删除该${entityDesc!""}?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                ${entityName!""}PostRequire('delete', {${deleteIdList!""}}).then(response => {
                    if(response) {
                        this.$message({
                            message: response.message,
                            type: response.status?'success':'error'
                        })
                    }
                }).finally(() => {
                    this.getList()
                })
            })
        },
        </#if>
        <#if showUpdateBtn>
        handleUpdate (row) {
            this.editDialogVisible = true
            this.${entityName!""} = this.$deepClone(row)
        },
        handleEditDialogConfirm () {
            this.$refs.editDialogRef.validate((valid) => {
                if (valid) {
                    ${entityName!""}PostRequire('update', this.fixParams(this.${entityName!""})).then(response => {
                        if(response) {
                            this.$message({
                                message: response.message,
                                type: response.status?'success':'error'
                            })
                        }
                        this.editDialogVisible = false
                    }).finally(() => {
                        this.getList()
                    })
                }
            });
        },
        </#if>
        <#if hasAssociation>
        showComponent(isSearch, sField, aTable, aField, aShowName) {
            this[aTable + "SelectVisible"] = true;
            this.componentSelectFromSearch = isSearch
            this.componentSelectField = sField
            this.componentAssociationField = aField
            this.componentAssociationTable = aTable
            this.componentAssociationShowName = aShowName
        },
        onComponentSelect(data) {
            if (this.componentSelectFromSearch) {
                this.listQuery[this.componentSelectField] = data[this.componentAssociationField]
                let json = this.listQuery[this.componentAssociationTable] || {}
                json[this.componentAssociationShowName] = data[this.componentAssociationShowName]
                this.listQuery[this.componentAssociationTable] = json
            } else {
                this.${entityName!""}[this.componentSelectField] = data[this.componentAssociationField]
                let json = this.${entityName!""}[this.componentAssociationTable] || {}
                json[this.componentAssociationShowName] = data[this.componentAssociationShowName]
                this.${entityName!""}[this.componentAssociationTable] = json
            }
        },
        </#if>
        <#if hasImageUpload>
        handleRemoveImage(key) {
            if (this.${entityName!""}[key]) {
                this.${entityName!""}[key] = ""
            }
        },
        handleImageExceed() {
            this.$message({
                message: "只能选择一张图片",
                type: 'error'
            })
        },
        handleImageUpload(file, key) {
            let params = new FormData()
            params.append("file", file.file);
            let headers = {
                'Content-Type': 'multipart/form-data; name="file"'
            }
            sysFilePostRequireByConfig('uploadImage', params, headers).then(response => {
                if (response) {
                    this.$message({
                        message: response.message,
                        type: response.status ? 'success' : 'error'
                    })
                    this.${entityName!""}[key] = response.data.id
                }
            })
        },
        beforeImageUpload(file) {
            const isJPG = file.type.includes("image");
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG) {
                this.$message.error('只允许上传 png、jpg、jpeg 格式的图片文件!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        </#if>
      closeDialog(){
        this.selectDialogVisible = false
        this.$emit('close')
      },
      fixParams(fixObject){
        let keys = Object.keys(this.params)
        keys.forEach(k=>{
          fixObject[k] = this.params[k]
        })
        return fixObject
      },
      handleResetSearch () {
        this.listQuery = this.fixParams(this.$deepClone( defaultListQuery))
      },
      handleSearchList () {
        this.listQuery.current = 1
        this.getList()
      },
      handleSizeChange (val) {
        this.listQuery.current = 1
        this.listQuery.pageSize = val
        this.getList()
      },
      handleCurrentChange (val) {
        this.listQuery.current = val
        this.getList()
      },
      handleDialogClose(formName) {
        if (this.$refs[formName]) {
          this.$refs[formName].clearValidate()
        }
      },
      getList () {
        this.listLoading = true
          ${entityName!""}PostRequire('listPage', this.fixParams(this.listQuery)).then(response => {
            this.listLoading = false
            this.list = response.data.records
            this.total = response.data.total
          })
        }
    }
  }
</script>
<#if elTableColumnExpandStr?length gt 0>
    <style>
        .demo-table-expand label {
            color: #99a9bf;
        }

        .demo-table-expand .el-form-item {
            margin-left: 10px;
            width: 100%;
        }
    </style>
</#if>